<template>
  <div>
    <p>需要购买商品数量:{{count}}</p>
    <!-- 语法v-on:事件名="事件处理函数" -->
    <!-- 给按钮绑定点击事件 -->
    <!-- 在事件处理函数中让count自增 -->
    <button v-on:click="addCount">点我加一</button>
    <button @click="addFiveCount(5)">点我加五</button>
    <button @click="sub">点我减一</button>
  </div>
</template>

<script>
//vue组件对象
export default {
  //在调试工具中看到名字
  name: 'CodeApp',

  data() {//vue 组件中的固定写法，专门用于定义变量
    return {
      count:0
    };
  },
  methods: {
    addCount(){
      this.count++
    },
    addFiveCount(num){
      this.count+=num
    },
    sub(){
      this.count--
    }
  },
};
</script>

<style>
</style>